<!-- pages/medicalCard/medicalCard.vue -->
<template>
  <view class="medical-card-container">
    <uni-nav-bar 
      title="就诊卡"
      left-icon="left"
      @clickLeft="navigateBack"
      fixed
      status-bar
    />

    <view class="card-list">
      <view class="card-item" v-for="card in medicalCards" :key="card.id">
        <view class="card-header">
          <text class="card-title">就诊卡 ID: {{ card.id }}</text>
          <text class="card-subtitle">患者: {{ card.patient_name }}</text>
        </view>
        <view class="card-content">
          <view class="card-field">
            <text class="field-label">性别:</text>
            <text class="field-value">{{ card.patient_gender }}</text>
          </view>
          <view class="card-field">
            <text class="field-label">年龄:</text>
            <text class="field-value">{{ card.patient_age }}</text>
          </view>
          <view class="card-field">
            <text class="field-label">证件类型:</text>
            <text class="field-value">{{ card.id_type }}</text>
          </view>
          <view class="card-field">
            <text class="field-label">证件号:</text>
            <text class="field-value">{{ card.id_number }}</text>
          </view>
          <view class="card-field">
            <text class="field-label">余额:</text>
            <text class="field-value">{{ card.balance }}</text>
          </view>
          <view class="card-field">
            <text class="field-label">创建时间:</text>
            <text class="field-value">{{ card.created_time }}</text>
          </view>
          <view class="card-field">
            <text class="field-label">更新时间:</text>
            <text class="field-value">{{ card.updated_time }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="add-card-btn">
      <button type="primary" @click="addMedicalCard">新增就诊卡</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const medicalCards = ref([]);

// 获取就诊卡列表
const fetchMedicalCards = async () => {
  try {
    const response = await uni.request({
      url: '/api/medicalCards', // 替换为实际的API地址
      method: 'GET'
    });
    if (response.statusCode === 200) {
      medicalCards.value = response.data;
    } else {
      uni.showToast({ title: '获取就诊卡信息失败', icon: 'none' });
    }
  } catch (error) {
    uni.showToast({ title: '获取就诊卡信息失败', icon: 'none' });
  }
};

// 新增就诊卡
const addMedicalCard = () => {
  uni.navigateTo({
    url: '/pages/medicalCard/addMedicalCard'
  });
};

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

onMounted(() => {
  fetchMedicalCards();
});
</script>

<style lang="scss" scoped>
.medical-card-container {
  padding: 20rpx;
  background-color: #f5f7fb;
  min-height: 100vh;

  .card-list {
    .card-item {
      background-color: #fff;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      padding: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

      .card-header {
        .card-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        .card-subtitle {
          font-size: 28rpx;
          color: #666;
        }
      }

      .card-content {
        margin-top: 10rpx;

        .card-field {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10rpx;

          .field-label {
            font-size: 28rpx;
            color: #666;
          }
          .field-value {
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }
  }

  .add-card-btn {
    margin: 40rpx;
    text-align: center;

    button {
      border-radius: 50rpx;
    }
  }
}
</style>
